<template>
  <div class="app-container">
    <!-- 优化后的搜索区域 -->
    <div class="search-wrapper">
      <div class="search-form-container">
        <div v-show="showSearch" class="search-form">
          <!-- 时间范围选择器 - 始终保持一行 -->
          <div class="search-item">
            <label class="search-label">时间范围</label>
            <div class="date-range">
              <el-date-picker
                v-model="dateRange[0]"
                clearable
                placeholder="开始日期"
                size="mini"/>
              <span class="date-separator">至</span>
              <el-date-picker
                v-model="dateRange[1]"
                clearable
                placeholder="结束日期"
                size="mini"/>
            </div>
          </div>

          <!-- 状态选择 -->
          <div class="search-item">
            <label class="search-label">状态</label>
            <el-select v-model="queryParams.status" class="status-select" clearable placeholder="请选择状态">
              <el-option label="执行中" value="0">
                <i class="el-icon-loading status-icon running"></i>执行
              </el-option>
              <el-option label="已完成" value="1">
                <i class="el-icon-check status-icon success"></i>正常
              </el-option>
              <el-option label="异常" value="2">
                <i class="el-icon-warning status-icon error"></i>异常
              </el-option>
            </el-select>
          </div>

          <!-- 搜索按钮组 - 始终保持一行 -->
          <div class="button-group">
            <el-button class="reset-btn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button class="search-btn" icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 日志列表 -->
    <div v-loading="loading" class="log-list-container">
      <div v-for="(log, index) in logList" :key="index" :class="getStatusClass(log.status)" class="log-item">
        <!-- 日志基本信息 -->
        <div class="log-header" @click="toggleDetail(index)">
          <div class="log-info">
            <div class="log-meta">
              <div class="meta-item time">
                <i class="el-icon-time"></i>
                <span>{{ log.createTime }}</span>
              </div>
            </div>
          </div>
          <div :class="{ 'active': activeIndex === index }" class="toggle-btn">
            <i :class="activeIndex===index? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
          </div>
        </div>
        <transition :name="activeIndex===index? 'el-zoom-in-bottom':'el-zoom-in-top'">
          <!-- 日志详细信息 -->
          <div v-show="activeIndex === index" class="log-details">
            <div class="details-header">
              <span>详细日志信息</span>
              <span v-if="log.logDetails" class="details-count">共 {{ log.logDetails.length }} 条</span>
            </div>
            <div v-if="log.logDetails && log.logDetails.length > 0" class="details-list">
              <div v-for="(detail, detailIndex) in log.logDetails" :key="detailIndex" class="detail-item">
                <div class="detail-content">
                  <div class="detail-time">{{ detail.time }}</div>
                  <div class="detail-msg">{{ detail.msg }}</div>
                </div>
              </div>
            </div>
            <div v-else class="empty-details">
              <span>暂无详细日志</span>
            </div>

            <!-- 图片轮播 -->
            <div v-if="log.img && log.img.length > 0" class="image-carousel">
              <div class="details-header">
                <span>日志截图</span>
                <span v-if="log.img" class="details-count">共 {{ log.img.length }} 张</span>
              </div>
              <el-carousel :autoplay="true" height="180px" indicator-position="outside" type="card">
                <el-carousel-item v-for="(img, imgIndex) in log.img" :key="imgIndex">
                  <el-image :preview-src-list="log.img" :src="img" alt="日志图片" class="carousel-image" fit="contain"/>
                </el-carousel-item>
              </el-carousel>
            </div>

            <div class="operations">
              <el-button
                v-hasPermi="['game:log:remove']"
                icon="el-icon-delete"
                size="mini"
                style="color: #f82f2f"
                type="text"
                @click.stop="handleDelete(log)">删除
              </el-button>
            </div>
          </div>
        </transition>
      </div>

      <!-- 无数据提示 -->
      <div v-if="logList.length === 0 && !loading" class="no-data">
        <el-empty description="暂无日志"></el-empty>
        <el-button icon="el-icon-refresh" size="small" type="text" @click="getList">刷新</el-button>
      </div>
    </div>

    <!-- 分页 - 固定在底部 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {delLog, listLog} from "@/api/game/log";

export default {
  name: "Log",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 日志列表数据
      logList: [],
      // 当前展开的日志索引
      activeIndex: null,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        accountId: null,
        gameId: null,
        deviceId: null,
        status: null
      },
      // 表单参数
      form: {},
      // 游戏选项
      gameOptions: [],
      // 设备选项
      deviceOptions: [],
      // 账号选项
      accountOptions: []
    };
  },

  created() {
    this.getList();
  },

  methods: {
    /** 查询日志列表 */
    getList() {
      this.loading = true;
      listLog(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.logList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 切换日志详情显示
    toggleDetail(index) {
      this.activeIndex = this.activeIndex === index ? null : index;
    },

    // 获取状态对应的类名
    getStatusClass(status) {
      return {
        'status-running': status === '0',
        'status-success': status === '1',
        'status-error': status === '2'
      };
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除选中的数据项？').then(() => {
        return delLog(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },

    // 处理分页变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },

    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 12px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px);
  background-color: #f5f7fa;
}

/* 优化后的搜索区域样式 */
.search-wrapper {
  margin-bottom: 16px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.search-form-container {
  width: 100%;
}

.search-form {
  padding: 15px;
}

/* 搜索项样式 */
.search-item {
  margin-bottom: 15px;
}

.search-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 13px;
  color: #606266;
}

/* 日期范围选择器样式 - 始终保持一行 */
.date-range {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap; /* 确保不换行 */
}

.date-separator {
  font-weight: bold;
  color: #909399;
  white-space: nowrap;
}

/* 状态选择器样式 */
.status-select {
  width: 100%;
}

.status-icon {
  margin-right: 5px;
  font-size: 14px;
}

.status-icon.running {
  color: #409EFF;
}

.status-icon.success {
  color: #67C23A;
}

.status-icon.error {
  color: #F56C6C;
}

/* 按钮组样式 - 始终保持一行 */
.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap; /* 确保不换行 */
}

.search-btn, .reset-btn {
  flex: 1;
  height: 30px;
  min-width: 0; /* 允许元素收缩 */
  padding: 0 15px; /* 减小内边距 */
  font-size: 14px; /* 适当减小字体大小 */
}

.search-btn {
  background-color: #409EFF;
  border-color: #409EFF;
}

.reset-btn {
  background-color: #f4f4f5;
  border-color: #dcdfe6;
  color: #606266;
}

/* 日志列表容器 */
.log-list-container {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: #dcdfe6 transparent;
}

.log-list-container::-webkit-scrollbar {
  width: 6px;
}

.log-list-container::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 3px;
}

.log-list-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.log-item {
  margin-bottom: 12px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

/* 状态样式 */
.status-running {
  border-left-color: #409EFF; /* 正在执行 - 蓝色 */
}

.status-success {
  border-left-color: #67C23A; /* 执行完毕 - 绿色 */
}

.status-error {
  border-left-color: #F56C6C; /* 执行异常 - 红色 */
}

.log-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
}

.log-header:hover {
  background-color: #f9fafc;
}

.log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
}

.meta-item {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 12px;
}

.meta-item i {
  margin-right: 5px;
  font-size: 14px;
  color: #909399;
}

.meta-item.time i {
  color: #909399;
}

.toggle-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.toggle-btn.active {
  background-color: #409EFF;
}

.toggle-btn.active i {
  color: white;
}

.toggle-btn i {
  color: #909399;
  font-size: 12px;
  transition: all 0.3s ease;
}

.log-details {
  padding: 0 16px 16px;
  background-color: #f9fafc;
  border-top: 1px solid #ebeef5;
  overflow: hidden;
  animation: expand 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px;
  font-size: 10px;
  color: #303133;
}

.details-count {
  font-size: 10px;
  color: #606266;
  font-weight: normal;
  background-color: #edf2fc;
  padding: 2px 6px;
  border-radius: 10px;
}

.details-list {
  max-height: 250px;
  overflow-y: auto;
  border-radius: 6px;
  background-color: #fff;
  padding: 8px;
  border: 1px solid #ebeef5;
  scrollbar-width: thin;
  scrollbar-color: #dcdfe6 transparent;
}

.details-list::-webkit-scrollbar {
  width: 4px;
}

.details-list::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 2px;
}

.empty-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-size: 12px;
  color: #909399;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #ebeef5;
}

.detail-item {
  padding: 8px 10px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 12px;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-content {
  display: flex;
  flex-direction: column;
}

.detail-time {
  color: #909399;
  margin-bottom: 4px;
  font-size: 12px;
}

.detail-msg {
  color: #303133;
  line-height: 1.5;
  word-break: break-all;
}

.image-carousel {
  margin-top: 16px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
  padding: 12px;
  border: 1px solid #ebeef5;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.operations {
  padding: 12px 0 0;
  text-align: right;
  border-top: 1px solid #ebeef5;
  margin-top: 12px;
}

.operations .el-button {
  margin-left: 8px;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #909399;
  background-color: #fff;
  border-radius: 8px;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 分页容器固定在底部 */
.pagination-container {
  margin-top: auto;
  padding: 12px 0;
  background-color: #fff;
  border-top: 1px solid #ebeef5;
  text-align: center;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
.el-pagination {
  width: 100%;
}

::v-deep .el-pagination .el-select .el-input .el-input__inner {
  font-size: 12px;
  height: 23px;
}

/* 移动端适配 - 保持一行布局 */
@media screen and (max-width: 768px) {
  .app-container {
    padding: 8px;
    height: calc(100vh - 60px);
  }

  .search-form {
    padding: 10px;
  }

  /* 确保按钮在小屏幕上也保持一行 */
  .search-btn, .reset-btn {
    font-size: 12px; /* 减小字体大小 */
    padding: 0 10px; /* 减小内边距 */
  }

  .log-header {
    padding: 12px;
  }

  .log-meta {
    gap: 10px;
  }

  .meta-item {
    font-size: 11px;
  }

  .log-details {
    padding: 0 12px 12px;
  }

  .details-list {
    max-height: 200px;
  }

  .pagination-container {
    padding: 8px 0;
  }
}

/* 超小屏幕适配 - 仍然保持一行布局 */
@media screen and (max-width: 480px) {
  .search-form {
    padding: 8px;
  }


  .date-separator {
    padding: 0 2px; /* 减小分隔符的间距 */
    font-size: 12px; /* 减小分隔符的字体大小 */
  }

  /* 进一步优化按钮在超小屏幕上的显示 */
  .search-btn, .reset-btn {
    font-size: 11px; /* 进一步减小字体大小 */
    padding: 0 8px; /* 进一步减小内边距 */
  }
}
</style>
